<template>
  <div class="qrcode-container">
    <div class="qrcode-wrapper">
      <canvas ref="qrcodeRef" :width="size" :height="size"></canvas>
      <div v-if="showLogo" class="qrcode-logo">
        <img src="../assets/images/logo.jpg" alt="Logo" />
      </div>
    </div>
    <div class="qrcode-actions" v-if="showActions">
      <n-button size="small" type="primary" @click="downloadQRCode">
        下载二维码
      </n-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import QRCode from 'qrcode'
import { NButton } from 'naive-ui'

const props = defineProps({
  value: {
    type: String,
    required: true
  },
  size: {
    type: Number,
    default: 200
  },
  margin: {
    type: Number,
    default: 2
  },
  color: {
    type: Object,
    default: () => ({
      dark: '#000000',
      light: '#FFFFFF'
    })
  },
  showLogo: {
    type: Boolean,
    default: true
  },
  showActions: {
    type: Boolean,
    default: true
  }
})

const qrcodeRef = ref(null)

// 生成二维码
const generateQRCode = async () => {
  if (!qrcodeRef.value || !props.value) return
  
  try {
    const options = {
      width: props.size,
      margin: props.margin,
      color: props.color,
      errorCorrectionLevel: 'H'
    }
    
    await QRCode.toCanvas(qrcodeRef.value, props.value, options)
  } catch (error) {
    console.error('生成二维码出错:', error)
  }
}

// 下载二维码
const downloadQRCode = () => {
  if (!qrcodeRef.value) return
  
  // 创建一个临时 canvas 来合并二维码和 logo
  const tempCanvas = document.createElement('canvas')
  const tempCtx = tempCanvas.getContext('2d')
  const qrCanvas = qrcodeRef.value
  
  // 设置临时 canvas 的尺寸与二维码相同
  tempCanvas.width = qrCanvas.width
  tempCanvas.height = qrCanvas.height
  
  // 绘制二维码
  tempCtx.drawImage(qrCanvas, 0, 0)
  
  // 如果启用了 logo，则绘制 logo
  if (props.showLogo) {
    const logoImg = document.querySelector('.qrcode-logo img')
    if (logoImg) {
      const logoSize = qrCanvas.width * 0.2 // logo 大小为二维码的 20%
      const logoX = (qrCanvas.width - logoSize) / 2
      const logoY = (qrCanvas.height - logoSize) / 2
      tempCtx.drawImage(logoImg, logoX, logoY, logoSize, logoSize)
    }
  }
  
  // 下载合并后的图片
  const link = document.createElement('a')
  link.download = `qrcode-${Date.now()}.png`
  link.href = tempCanvas.toDataURL('image/png')
  link.click()
}

// 监听值变化，重新生成二维码
watch(() => props.value, generateQRCode)

onMounted(() => {
  generateQRCode()
})
</script>

<style scoped>
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.qrcode-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qrcode-logo {
  position: absolute;
  width: 20%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.qrcode-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qrcode-actions {
  margin-top: 10px;
}
</style> 